<template>
	<view>
		<view class="none-shop" v-if="shopCarList.length == 0">
			暂无商品!
		</view>
		<view class="" v-else>
			<view class="jifen">我的积分：<text style="color: #e51717; font-size: 32rpx;">{{myPoints}}</text> </view>
			<view class="shop-container" v-for="(item,index) in shopCarList" :key="index">
				<view class="sc-left">
					<img :src="item.pointsItemVo.image" alt="" style="width: 100%; height: 100%;" />
				</view>
				<view class="sc-center">
					<view class="cc-top">{{item.pointsItemVo.name}}</view>
					<view class="cc-jifen">{{item.pointQuantity}} <text style="font-size: 24rpx;">积分</text> </view>
				</view>
				<view class="sc-right">
					<view class="delete-icon" @click="orderModalShowBtn('删除',item)">
						<img src="@/static/info/shanchu.png" alt="" style="width: 100%;height: 100%;" />
					</view>
					<view class="cr-bottom">
						<u-icon name="minus-circle" size="40" @click="reduceBtn(item)"></u-icon>
						<text style="font-size: 32rpx;" decode> {{'&nbsp;'}}{{item.quantity}}{{'&nbsp;'}}</text>
						<u-icon name="plus-circle" size="40" @click="addBtn(item)"></u-icon>
					</view>
				</view>
			</view>
			<view class="sc-bottom">
				<view class="cb-left">
					合计：<text style="color: #e51717; font-size: 32rpx;">{{pointsSum}}积分</text>
				</view>
				<view class="submit-style" @click="orderModalShowBtn('提交')">提交结算</view>
			</view>
		</view>
		<u-modal v-model="orderModalShow" :show-title="false" :show-cancel-button="true" @confirm="orderSubmit">
			<view class="slot-content">
				{{messageTip}}？
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getPointsCart,modifyPointsCar,deletePointsCar,getPointsOrder
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				shopCarList: [],
				num: 1,
				orderModalShow: false,
				pointsSum: 0,
				myPoints:uni.getStorageSync('trainneInfo')?uni.getStorageSync('trainneInfo').points:0,
				messageTip:'',
				ids:[],
				myPoints:uni.getStorageSync('trainneInfo')?Number(uni.getStorageSync('trainneInfo').points) :0,
				artPointsOrderItems:[]
			}
		},
		methods: {
			reduceBtn(item) {
				if (item.quantity === 1) {
					return uni.showToast({
						title: '当前数量不能小于1',
						icon: 'none'
					})
				}
				item.quantity = item.quantity - 1
				this.modifyPointsCar(item)
			},
			addBtn(item) {
				if(item.quantity > item.pointsItemVo.quantity){
					return uni.showToast({
						title: '当前数量不能多余库存',
						icon: 'none'
					})
				}
				item.quantity = item.quantity + 1
				
				this.modifyPointsCar(item)
			},
			
			async modifyPointsCar(item){
				uni.showLoading()
				const data = {
					id:item.id,
					quantity:item.quantity,
					pointQuantity:item.pointQuantity,
					itemId:item.itemId,
					traineeId: uni.getStorageSync('trainId')
				}
				const {
					code,
					rows
				} = await modifyPointsCar(data)
				if(code === 200){
					this.getPointsCart()
				}
			},
			orderModalShowBtn(message,item) {
				this.orderModalShow = true
				if(message === '提交'){
					this.messageTip = "确认提交到订单吗"
				}else{
					this.messageTip = '确定删除吗'
					this.ids = [item.id]
				}
			},
			async orderSubmit() {
				if(this.messageTip === '确认提交到订单吗'){
					if(Number(this.myPoints) < Number(this.pointsSum) ){
					    return	uni.showToast({
							title: '当前积分不足',
							icon: 'none'
						})
					}
					this.artPointsOrderItems = this.shopCarList.map(v=>{
						return{
							itemId: v.itemId,
							quantity: v.quantity,
						}
					})
					const data = {
						artPointsOrderItems:this.artPointsOrderItems.map(v=>{
							return {
								itemId: v.itemId,
								quantity: v.quantity,
							}
						})
					}
					const res = await getPointsOrder(data)
					if (res.code == 200) {
						const arr = this.shopCarList.map(v=>{
							return v.id
						})
						console.log("arr",arr);
						this.deletePointsCar(arr)
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
					}
				}else{
					console.log("item",this.ids);
					this.deletePointsCar(this.ids)
				}
				// uni.showToast({
				// 	title: '提交成功',
				// 	icon: 'none'
				// })
			},
			
			
			async deletePointsCar(item){
				uni.showLoading()
				const data = {
					item
				}
				const {
					code,
					rows
				} = await deletePointsCar(item)
				if(code === 200){
					this.getPointsCart()
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					})
				}
			},
			async getPointsCart() {
				uni.showLoading()
				const {
					code,
					rows
				} = await getPointsCart()
				if (code == 200) {
					uni.hideLoading()
					// this.shopCarList = rows
		
					this.shopCarList = Object.values(rows.reduce((res, v) => {
						if (res[v.itemId]) res[v.itemId].quantity += v.quantity;
						else res[v.itemId] = v;
						return res;
					}, {}))
					
					this.pointsSum = this.shopCarList.reduce((acc, cur) => {
						const product = parseInt(cur.pointQuantity) * parseInt(cur.quantity);
						return acc + product;
					}, 0);
					
				
		
				}
			},
		},
		onLoad() {
			this.getPointsCart()

		}
	}
</script>

<style>
	.none-shop {
		text-align: center;
		margin-top: 200rpx;
	}

	.jifen {
		margin-top: 20rpx;
		margin-left: 20rpx;
		font-weight: bold;
	}

	.shop-container {
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		margin: 30rpx auto;
		width: 95%;
		position: relative;
	}

	.sc-left {
		width: 120rpx;
		height: 120rpx;
	}

	.delete-icon {
		width: 50rpx;
		height: 50rpx;
		margin-left: 70rpx;
	}

	.sc-center {
		margin-left: 20rpx;
	}

	.cc-top {
		font-weight: bold;
	}

	.cc-jifen {
		color: #e51717;
		font-size: 32rpx;
		margin-top: 40rpx;
	}

	.sc-right {
		position: absolute;
		right: 0;
	}

	.cr-bottom {
		margin-top: 30rpx;
		margin-right: 20rpx;
	}

	.sc-bottom {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 120rpx;
		width: 100%;
		line-height: 120rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.submit-style {
		width: 220rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #e51717;
		color: #fff;
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 30rpx;
	}

	.slot-content {
		text-align: center;
		margin: 60rpx 0;
	}
</style>